<template>
  <div id="app">
    <Left class="column">
      <div class="time">
        {{nowTime}}
      </div>
    </Left>
    <Middle class="column"></Middle>
    <Right class="column"></Right>
  </div>
</template>

<script>
import Left from './components/Left'
import Middle from './components/Middle'
import Right from './components/Right'
export default {
  name: 'app',
  components:{Left, Middle, Right},
  data(){
    return{
      nowTime: ''
    }
  },
  mounted(){
    setInterval(() => {
      this.nowTime = Date(Date.now())
    }, 1000);
    
  },
}
</script>

<style scoped>
#app{
    max-width: 1920px;
    min-width: 1024px;
    margin: 0 auto;
    min-height: 780px;
    padding: 1.5rem 0.25rem 0;
    background: url(./assets/image/logo.png)no-repeat 0 0 / contain ;
    display: flex;
}
.column{
  flex: 3;
}
.column:nth-child(2){
  flex:4;
  margin: 0.4rem 0.25rem 0;
}
.time{
  position: absolute;
  right: 3%;
  top: 6%;
  color: white;
  font-size:10px;
}
</style>
